<template>
  <div>
    App
    <button @click="getPosts">GET</button>
    <button @click="addPost">POST</button>
    <button @click="updatePost">PUT</button>
    <button @click="patchPost">PATCH</button>
    <button @click="delPost">DELETE</button>
  </div>
</template>

<script>
import axios from "axios";
/*
  请求方式：GET(查) POST(增) PUT(改) DELETE(删)

  axios.get(url[, config])
  axios.post(url[, data, config])
  axios.put(url[, data, config])
  axios.delete(url[, config])

  axios(config)
*/
export default {
  name: "App",
  methods: {
    async getPosts() {
      try {
        // 请求方式是 GET
        // GET 请求的参数往往是查询字符串参数（querystring）
        // axios.get('http://localhost:3000/posts?_limit=10')
        // const result = await axios.get("http://localhost:3000/posts", {
        //   params: { _limit: 10 },
        // });
        const result = await axios({
          method: "GET", // 请求方式
          url: "http://localhost:3000/posts", // 请求地址
          params: {
            // 查询字符串参数
            _limit: 10,
          },
        });
        /*
          result
            config      请求配置项（内部会将请求方式、请求地址、请求参数等整理成一个对象）
            data        响应体数据
            headers     响应头
            request     发送请求的xhr对象
            status      响应状态码 1xx(正在进行中) 2xx(请求成功 200) 3xx(请求重定向 301 302 304) 4xx(客户端错误 404) 5xx(服务器错误 500)
            statusText  响应状态码文本
        */
        console.log(result.data);
      } catch (e) {
        console.log(e);
      }
    },
    async addPost() {
      try {
        // get请求参数默认是查询字符串 querystring --> query --> params
        // post请求参数默认是请求体参数 body --> data
        // const result = await axios.post(
        //   "http://localhost:3000/posts",
        //   {
        //     title: "xxx标题",
        //     content: "xxxxxx内容",
        //   }
        //   // { params: { _limit: 10 } } // 一般不会
        // );
        const result = await axios({
          method: "POST",
          url: "http://localhost:3000/posts",
          data: {
            // 请求体参数
            title: "xxx标题",
            content: "xxxxxx内容",
          },
          // params: {
          //   // 查询字符串参数
          //   _limit: 10,
          // },
        });
        console.log(result.data);
      } catch (e) {
        console.log(e);
      }
    },
    async updatePost() {
      try {
        // const result = await axios.put("http://localhost:3000/posts/a4e3", {
        //   title: "zzz标题",
        //   // content: "yyyy内容",
        // });
        const result = await axios({
          method: "PUT",
          url: "http://localhost:3000/posts/a4e3",
          data: {
            title: "zzz标题",
          },
        });
        console.log(result.data);
      } catch (e) {
        console.log(e);
      }
    },
    async patchPost() {
      try {
        // const result = await axios.patch("http://localhost:3000/posts/1", {
        //   title: "aaa标题",
        // });
        const result = await axios({
          method: "PATCH",
          url: "http://localhost:3000/posts/1",
          data: {
            title: "zzz标题",
          },
        });
        console.log(result.data);
      } catch (e) {
        console.log(e);
      }
    },
    async delPost() {
      try {
        const result = await axios.delete("http://localhost:3000/posts/1");
        console.log(result.data);
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style></style>
